<template>
  <div class="body-content">
    <div class="tableLeftBox">

      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>字典类型</span>
            <el-space>
              <el-button type="primary" icon="Plus" size="small" circle @click="addDictType('新增')"></el-button>
              <el-button type="danger" icon="Delete" size="small" circle @click="deleteDictType(true)"
                         v-if="!deleteDictTypeOpt"></el-button>
              <el-button icon="CircleClose" size="small" circle @click="deleteDictType(false)" v-else></el-button>

            </el-space>
          </div>
        </template>
        <div class="inner">
          <div class="outer">
            <div v-for="(item,index) in dictList" :key="index" class="text item" @click="showDictDetail(item)">
              {{ item.dictName }}({{ item.dictCode }})
              <el-button type="danger" icon="Delete" size="small" circle v-if="deleteDictTypeOpt"
                         @click="deleteDictTypeItem(item)"></el-button>
            </div>
          </div>
        </div>
      </el-card>

    </div>

    <div style="width:calc(100% - 310px);float:left;">
      <PageTable ref="defaultTable"
                 :params="params"
                 :addBtnShow="params.dictType!=undefined"
                 action="/user-center/dict/findPage"
                 :columns="columns">
      </PageTable>
    </div>
  </div>
</template>
<script lang="ts" setup>

// @ts-ignore
import {getCurrentInstance, onMounted, ref} from "vue";
// @ts-ignore
const {proxy} = getCurrentInstance()
// @ts-ignore
import {markRaw} from 'vue'
// @ts-ignore
import {ElMessage, ElMessageBox} from 'element-plus'
// @ts-ignore
import {Delete, Message} from '@element-plus/icons-vue'

// pagetable
const defaultTable = ref<any>(null);

const columns: any = [{
  title: '标签',
  field: 'label',
  select: true
},
  {
    title: '值',
    field: 'value',
  },
  {
    title: '类型名称',
    field: 'dictName',
  },
  {
    title: '排序',
    field: 'sort',
  },
  {
    title: '操作',
    field: 'opt',
    width: 150,
    align: 'center',
    headerAlign: 'center',
    formatter: {
      type: 'opt'
    }
  },
];
const dictList = ref<any>([]);
const params = ref<any>({});
const deleteDictTypeOpt = ref<any>(false);
onMounted(() => {
  dictListReq();
})

const dictListReq = () => {
  proxy.$http.post('/user-center/dict/findDictTypeList', {}).then((apiData: any) => {
    dictList.value = apiData.data;
  });
}

/**
 *
 * @param active 执行的动作(edit,view,delete)
 */
function optColumnEvent(active: string, row: any) {
  switch (active) {
    case 'add': {
      if (params.value.dictType) {
        row.dictType = params.value.dictType;
        row.dictName = params.value.dictName;
      } else {
        ElMessage({
          message: '请选择字典类型',
          type: 'error',
        });
        break;
      }
      proxy.$Modal.edit({
        title: '新增',
        comps: 'DictEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'edit': {
      proxy.$Modal.edit({
        title: '新增',
        comps: 'DictEdit',
        params: row,
        parentContext: proxy
      });
      break;
    }
    case 'view': {
      proxy.$Modal.show({
        title: '新增',
        comps: 'DictEdit',
        params: row
      });
      break;
    }
    case 'delete': {
      ElMessageBox.confirm(
          '您确定删除这条数据吗?',
          'Warning',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
            draggable: true,
            icon: markRaw(Delete),
          }
      ).then(() => {
        // @ts-ignore
        defaultTable.value.deleteTable('/user-center/dict/delete', row.id);
      })
      break;
    }
  }
}

const showDictDetail = (item: any) => {
  params.value.dictType = item.dictCode;
  params.value.dictName = item.dictName;
  defaultTable.value.reloadTable({});
}

const addDictType = (title: string) => {
  proxy.$Modal.edit({
    title: title,
    comps: 'DictTypeEdit',
    params: {},
    parentContext: proxy
  });
}
const deleteDictType = (b: boolean) => {
  deleteDictTypeOpt.value = b;
}
const deleteDictTypeItem = (item: any) => {
  proxy.$http.post('/user-center/dict/deleteDictType', {id: item.id}).then((api: any) => {
    ElMessage({
      message: '操作成功',
      type: 'success',
    })
    dictListReq();
  });

}
defineExpose({
  optColumnEvent, dictListReq
});
</script>
<style scoped lang="less">
.item {
  .el-button {
    float: right;
  }
}
</style>